<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>订单列表</title>
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <style>
  	.layui-table-cell{
	  height: 60px;
	  line-height: 60px;
	}
  </style>
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">订单号</label>
    <div class="layui-input-inline">
      <input type="text" name="orderNo"  placeholder="请输入订单号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

 
<table id="demo" lay-filter="test"></table>
<div id="detail" style="display: none;padding: 10px">
<table  id="demo2" lay-filter="detail"></table>
<p>
	收货地址：
	<span id="address"></span>
</p>
</div>

 
<script src="../layui/layui.js"></script>
<script>
var goodsId=0;
layui.use(['table','form','jquery'], function(){
  var table = layui.table;
  var form = layui.form;
  var $ = layui.jquery;
  
  
  //渲染表格
  table.render({
    elem: '#demo'
    ,height: 512
    ,url: 'AdminBaseOrderServlet?method=findAll' //数据接口
    ,page: true //开启分页
    ,limit:5
    ,limits:[5,10,15,20]
    ,cols: [[ //表头
      {field: 'orderNo', title: '订单号'}
      ,{field: 'createTime', title: '下单时间'}
      ,{field: 'money', title: '金额'} 
      ,{field: 'status', title: '状态',templet:function(d){
    	  switch(d.status){
    	  case 1:
    		  return '未付款'
    		  break
    	  case 2:
    		  return '未发货'
    		  break
    	  case 3:
    		  return '已发货'
    		  break
    	  case 4:
    		  return '已完成'
    		  break
    	  case 5:
    		  return '已取消'
    		  break
    	  }
      }}
      ,{field: 'waybill', title: '运单号'} 
      ,{fixed: 'right',title: '操作',   align:'center', toolbar: '#barDemo'}
    ]]
  });
  
//行工具条事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
   
    if(layEvent === 'detail'){ //查看
      //do somehing
      //查询订单收货地址
      $.get(
    		'AdminBaseOrderServlet?method=findAddress',{
    			addressId:data.addressId
    		},function(res){
    			$('#address').html(res)
    		}
      )
        //渲染表格
  
      
      layer.open({
		  type: 1,
		  title:'订单详情 [订单号：'+data.orderNo+'] ',
		//  area:['800px','500px'],
		  content: $('#detail'),
		  success:function(){
			  table.render({
				    elem: '#demo2'
				    ,url: 'AdminBaseOrderServlet?method=findDetail&orderId='+data.id //数据接口
				    ,cols: [[ //表头
				      {field: 'fileName',width:'20%', title: '图片',templet: '<div><img  style="cursor:pointer;" width="60px" height="60px"  src="../images/{{d.fileName}}" /></div>'}
				      ,{field: 'goodsName',width:'20%', title: '商品名称'}
				      ,{field: 'price',width:'20%', title: '单价'} 
				      ,{field: 'buyNum',width:'20%', title: '数量'} 
				      ,{field: '',width:'20%', title: '金额',templet:function(d){
				    	  return d.price*d.buyNum
				      }} 
				    ]]
				  });
		  }
		}); 
      
    	
    } else  if(layEvent === 'send'){
    	$('#id').val(data.id);
    	layer.open({
  		  type: 1,
  		  title:'发货',
  		  content: $('#send')
  		});
    }
  });
  
//监听提交
  form.on('submit(formDemo)', function(data){
    //layer.msg(JSON.stringify(data.field));
    //表格重载
    table.reload('demo', {
	  where: data.field //设定异步数据接口的额外参数
	  //,height: 300
	});
    return false;
  });
  
  form.on('submit(sendBtn)', function(data){
		 $.post(
			'AdminBaseOrderServlet?method=send',
			data.field,
			function(res){
				layer.close(layer.index)
				table.reload('demo')
				layer.msg('发货成功')
			}
		 );
	    return false;//阻止表单提交
	  });
  
  
});
</script>
</body>
<form id="send" lay-filter="send" style="display: none" class="layui-form" action="">
<input type="hidden" id="id" name="id">
    <div class="layui-form-item">
    <label class="layui-form-label">运单号</label>
    <div class="layui-input-inline">
      <input type="text" name="waybill" required="required"  placeholder="请输入运单号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="sendBtn">确定</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</html>
<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
{{#  if(d.status == 2){ }}
<a class="layui-btn layui-btn-xs" lay-event="send">发货</a>
  {{#  } }}

</script>


